<template>
<div>
  <el-row style="border-bottom: 2px solid rgb(201, 201, 201);">
    <div class="label">{{ scoreName }}</div>
    <div style="margin: 10px; font-size: 12px; color: red">*所有计算结果必须重新核对，且不能作为临床决策的唯一依据</div>
  </el-row>
  <el-row style="margin: 10px">
    <Label content="描述"/>
    <div style="margin: 15px">{{ expression }}</div>
  </el-row>
  <el-row style="margin: 10px">
    <Label content="评分计算"/>
    <div style="margin: 15px" v-for="(questionItem, idx) in scoreData" :key="questionItem.id">
      <div>{{ idx + 1 }} {{ questionItem.name }} ({{questionItem.multiple ? '多选' : '单选'}})</div>
      <div v-if="!questionItem.multiple">
        <el-radio style="display: block; margin-top: 5px;"
                  v-for="optionItem in questionItem.items"
                  :key="optionItem.id"
                  v-model="questionItem.score"
                  :label="optionItem.score">
          {{ optionItem.describe }}</el-radio>
      </div>
      <div v-else >
        <el-checkbox-group v-model="questionItem.checkList">
          <el-checkbox style="display: block; margin-top: 5px;"
            v-for="optionItem in questionItem.items"
            :key="optionItem.id"
            :label="optionItem.score">
            {{ optionItem.describe }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </el-row>
  <el-row style="margin: 10px">
    <Label content="计算结果"/>
    <div style="margin: 15px">
      <span v-if="calculateResult">{{ calculateResult }}</span>
      <span v-if="calculateResultDesc" :style="{ color: resultDescFontColor}">({{ calculateResultDesc }})</span>
      <div>
        <el-button type="primary" @click="calculate">{{ calculateResult ? '重新计算' : '点击计算' }}</el-button>
      </div>
    </div>
  </el-row>
  <el-row style="margin: 10px">
    <Label content="结果说明"/>
    <div style="margin: 15px" v-html="resultDescription">
    </div>
  </el-row>
  <el-row style="margin: 10px">
    <Label content="参考文献"/>
    <div style="margin: 15px"> {{ reference }}
    </div>
  </el-row>
</div>
</template>

<script>
  import Label from "./Label";
    export default {
      components:{
        Label,
      },
      methods:{
        calculate() {
          this.resultDescFontColor = ''
          this.calculateResult = 0
          this.calculateResultDesc = ''
          try {
            // 计算得分;
            for(let question of this.scoreData){
              if(question.score){
                this.calculateResult += question.score;
              }
            }
            // 结果与结果集比较
            var relationArray = ['&&', '||']
            var conditionArray = ['>=', '>', '=', '<=', '<']
            var resultFontColorArray = ['gray', 'green', 'orange', 'red']
            for (let resultItem of this.resultItems) {
              var resultExpression = 'true'
              for (let condition of resultItem.conditions) {
                resultExpression += relationArray[condition.relation] + '(' + this.calculateResult + ')' + conditionArray[condition.condition] + '(' + condition.value + ')'
              }
              var cntResultFlag = eval(resultExpression)
              if (cntResultFlag) {
                this.resultDescFontColor = resultFontColorArray[resultItem.resultDescFontColor]
                this.calculateResultDesc = resultItem.resultDesc
                return
              }
            }
          } catch (e) {
            alert('计算失败')
          }
        }
      },
      data(){
        return {
          reference: '《常用临床医学名词》（2018年第4版）',
          resultDescription: '基础<img class="rw_img bz" id="20200907094918_864" src="/ymer/action/file/showImage?filename=image/knowledge/0001AA100000000A1JFL/0001AA100000000A4UA1/20200907094918_864.bmp"/>代谢率正常值为±10%；+20%～30%为轻度甲亢，+30%～60%为中度甲亢，+60%以上为重度甲亢',
          resultDescFontColor: 0,
          calculateResultDesc: '',
          calculateResult: 0,
          scoreName: '非ST段抬高急性冠脉综合征患者TIMI危险评分',
          expression: '基础代谢率=(脉率+脉压差*0.74)*0.75-72',
          scoreData: [{
            id: 0,
            name: "question1",
            multiple: false,
            score: 0,
            items: [{
              id: 0,
              score: 10,
              describe: "hello"
            }, {
              id: 1,
              score: 20,
              describe: "world"
            }]
          }, {
            id: 1,
            name: "question 2",
            multiple: true,
            checkList: [],
            score: 0,
            items: [{
              id: 0,
              score: 30,
              describe: "apple"
            }, {
              id: 1,
              score: 40,
              describe: "big"
            }]
          }],
          resultItems:[
            {
              resultDescFontColor: 0,  // 默认0
              resultDesc: '默认结果',
              conditions: [{
                relation: 0,              // 0 且, 1 或
                condition: 0,              // 条件符 0 大于等于、1 大于、2 等于、3 小于等于、4 小于
                value: 0
              }, {
                relation: 0,
                condition: 4,
                value: 15
              }
              ],
            },
            {
              resultDescFontColor: 1,  // 默认0
              resultDesc: '正常结果',
              conditions: [{
                relation: 0,              // 0 且, 1 或
                condition: 0,              // 条件符 0 大于等于、1 大于、2 等于、3 小于等于、4 小于
                value: 15
              }, {
                relation: 0,
                condition: 4,
                value: 25
              }
              ],
            },
            {
              resultDescFontColor: 2,  // 默认0
              resultDesc: '超标结果',
              conditions: [{
                relation: 0,              // 0 且, 1 或
                condition: 0,              // 条件符 0 大于等于、1 大于、2 等于、3 小于等于、4 小于
                value: 25
              }, {
                relation: 0,
                condition: 4,
                value: 35
              }
              ],
            },
            {
              resultDescFontColor: 3,
              resultDesc: '严重警告',
              conditions: [{
                relation: 0,              // 0 且, 1 或
                condition: 4,              // 条件符 0 大于等于、1 大于、2 等于、3 小于等于、4 小于
                value: 0
              }, {
                relation: 1,
                condition: 0,
                value: 35
              }
              ],
            }
          ],
        }
      },
      watch: {
        scoreData: {
          handler(nv) {
            for (let question of nv) {
              if (question.multiple) {
                question.score = eval(question.checkList.join("+"))
              }
            }
          },
          deep: true
        },
      }
    }
</script>

<style scoped>
.label{
  margin: 10px;
  font-size: large;
  font-weight: bold;
}
</style>
